<template>
    <van-nav-bar title="重置密码" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="head">
        <label clearable class="resetphone">1.验证手机号码
        </label>
        <van-icon name="arrow" class="arrowicon" />
        <label clearable class="resetpwd">2.验证手机号码
        </label>
    </div>
    <van-form>
        <div class="login">
            <van-cell-group inset>
                <van-icon name="phone-o" class="phoneicon" color="rgb(180, 180, 180)" />
                <van-field v-model="phone" name="手机号" placeholder="请输入手机号码" :rules="[{ required: true, message: '' }]"
                    class="phone" />
                <van-icon name="comment-o" class="captchaicon" color="rgb(180, 180, 180)" />
                <van-field v-model="captcha" name="短信验证码" placeholder="请输入短信验证码"
                    :rules="[{ required: true, message: '' }]" class="captcha" />
                <label class="getcaptcha" @click="getCaptchaChoice">{{ captchaButtonText }}</label>
                <div class="captcha_prompt" v-if="showCaptchaPrompt">
                    <p class="phone_success" @click="handlePhoneSuccess"> {{ phone_success }}</p>
                    <p class="phone_notnull" @click="handlePhoneNotnull">{{ phone_notnull }}</p>
                    <p class="phone_isfalse" @click="handlePhoneIsfalse">{{ phone_isfalse }}</p>
                    <p class="phone_isoccupied" @click="handlePhoneIsoccupied">{{ phone_isoccupied }}</p>
                </div>
            </van-cell-group>
        </div>
        <div style="margin:20px;position: relative;">
            <van-button round block type="primary" native-type="submit" style="border-radius: 10px;" @click="toNext">
                下一步
            </van-button>
            <div class="successmsg" v-if="showSuccess">
                <van-icon name="checked" class="checkedicon" />
                {{ successmsg }}
            </div>
            <div class="alertmsg" v-if="showAlert">
                {{ alertmsg }}
            </div>
        </div>
    </van-form>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import http from '../http';

const onClickLeft = () => history.back();

const router = useRouter();
let phone = ref('');
let captcha = ref('');
let showCaptchaPrompt = ref(false);
let showSuccess = ref(false);
let showAlert = ref(false);
let captchaButtonText = ref('获取验证码');
let phone_success = ref('验证码发送成功');
let phone_notnull = ref('手机号码不能为空');
let phone_isfalse = ref('手机号码格式不正确');
let phone_isoccupied = ref('该手机号码已被占用');
let successmsg = ref('');
let alertmsg = ref('');
let countdownInterval;

</script>
<style scoped></style>